import React, {Component} from 'react'
import './index.less'
import { observer } from 'mobx-react/custom'
import MainTextVM from 'cvm/post/mainText'
import Cover from 'components/common/cover'
import IconInfo from 'components/common/iconInfo'
import LoadMore from 'uxcore-load-more'
import Dialog from 'uxcore-dialog'

const Content = observer(({ vm }) => {
  if (!vm.data) return <div />
  return (
    <div>
      <div className='hopebox-title flex-wrap'>
        <div className='flex-1 go-home-icon'>
          {<img onClick={vm.handleShareToHome} src={require('images/go-home.png')} />}
        </div>
        <div className='flex-1'>绿格子</div>
        <div className='flex-1'>
          {<p onClick={vm.handleAttention}
            className='follow-focus'>{vm.isAttention}</p>}
        </div>
      </div>
      <div className='post-detail'>
        <IconInfo iconInfo={{
          icon: vm.data.Headimgurl,
          username: vm.data.Nickname,
          commentDate: vm.data.CreateTime
        }} />
        <div className='discuss-title'>
          <p style={{'background': 'white'}} dangerouslySetInnerHTML={{__html: vm.data.Content}} />
        </div>
        <div className='user-images'>
          {vm.data.PicList &&
           vm.data.PicList.map((item, index) => {
             return (
               <div key={index} className='images-box images-box-height'>
                 <img src={item} alt='' />
               </div>
             )
           })
        }
        </div>
        <div className='Interaction-box-2'>
          <p className='discuss'>
            <spna>阅读</spna>
            <span>{vm.data.ReadingNumber}</span>
          </p>
          <p className='thumbs'>
            <spna>赞</spna>
            <span>{vm.data.PointNumber}</span>
          </p>
          {vm.userId &&
            <p onClick={vm.handleMore} className='more'>
              <img src={require('images/more.png')} alt='' />
            </p>
          }
        </div>
      </div>
    </div>
  )
})

const ReplyItem = observer(({ vm, handleReply }) => {
  let name = <p>{vm.data.Answer}</p>
  if (vm.data.Asker) {
    name = <div className='replay-user'>
      <p>{vm.data.Answer}<span>回复</span>{vm.data.Asker}</p>
    </div>
  }
  return (
    <div className='my-comment flex-wrap '>
      <div onClick={() => handleReply({data: vm.data})} className='comment-header'>
        <img src={vm.data.HeadImgUrl} alt='' />
      </div>
      <div className='comment-content'>
        <div className='name-user'>
          {name}
        </div>
        <div className='review-details'>{vm.data.Content}</div>
        <div className='comment-time-1 flex-wrap'>
          <div className='flex-1'>
            <span className='year-date'>{vm.data.CreateTime}</span>
          </div>
          <div className='flex-1 thumbs-up-box'>
            <p onClick={vm.handleLike} className='thumbs'>
              <img src={vm.likeIcon} alt='' />
              <span>{vm.data.PointNumber > 0 && vm.data.PointNumber}</span>
            </p>
            <p onClick={() => handleReply({data: vm.data})}
              className='discuss'>
              <img src={require('../../images/discuss.png')} alt='' />
              <span>{vm.data.CommentriosNumber > 0 && vm.data.CommentriosNumber}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  )
})

// {!vm.userId &&
//   <div className='footer-follow'>
//     <div className='header'>
//       <div className=''>
//         <img src={require('images/rabbit.png')} className='logo' alt='' />
//       </div>
//       <div className=' footer-text'>
//         <p>绿格子Hopebox</p>
//         <p>点击关注，长按识别二维码</p>
//       </div>
//       <div className=' alert-code'>
//         <a className='' onClick={vm.handleAttention}>+ 关注</a>
//       </div>
//     </div>
//   </div>
// }

const Reply = observer(({ vm }) => {
  if (!vm.data) return <div />
  return (
    <div>
      <div className='count-number'>共{vm.data.CommentriosNumber}条评论</div>
      {vm.userId && vm.replys.length === 0 &&
        <div className='none-discuss'>暂无评论，快来抢沙发</div>}
      <div className='my-comment-box'>
        {vm.replys.map((item, index) => {
          return <ReplyItem key={index} vm={item}
            handleReply={vm.handleShowModal} />
        })}
      </div>
      {vm.pageInfo.status !== 'noMore' &&
        <LoadMore status={vm.pageInfo.status} trigger={['view', 'click']}
          noMoreText={'没有更多啦'}
          onLoadMore={vm.handleLoadMore} />}
    </div>
  )
})

const Qrcode = observer(({ vm }) => {
  return (
    <div>
      <div className='follow-us' style={{display: vm.showQrcode}}>
        <div className='code-box'>
          <p>长按识别关注公众号</p>
          <img src={require('images/qrcode.jpg')} alt='' />
          <p>绿格子</p>
          <i className='close'><img onClick={vm.handleHideShare} src={require('images/close.png')} alt='' /></i>
        </div>
      </div>
      <div onClick={vm.handleHideShare}
        className='share-mask' style={{display: vm.showShare}}>
        <img src={require('images/share-1.png')} alt='' />
      </div>
    </div>
  )
})

const Footer = observer(({ vm }) => {
  if (!vm.data) return <div />
  return (
    <div className='writing-box flex-wrap'>
      <div className='flex-2 input-box'>
        <div id='btn' onClick={vm.handleShowModal}>写评论...</div>
        <Dialog ref='dialog' title='帖子评论'
          visible={vm.dialogVisible}
          onOk={vm.handleOk}
          onCancel={vm.handleCancel}>
          <textarea value={vm.commentValue} onChange={vm.handleChangeComment}
            style={{fontSize: 16, height: 60, color: '#000'}}
            ref='replayx' name='' id='replayTextarea' placeholder={vm.placeholder} />
        </Dialog>
      </div>
      <div className='Interaction-box-3'>
        <p onClick={vm.handleLike} className='thumbs'>
          <img src={vm.likeIcon} alt='' />
          <span>{vm.data.PointNumber}</span>
        </p>
        <p onClick={vm.handleShowShare} className='share'>
          <img src={require('images/share.png')} alt='' />
        </p>
      </div>
    </div>
  )
})

@observer
export default class MainText extends Component {
  vm = new MainTextVM(this.props)
  constructor (props) {
    super(props)
    window.document.title = '正文'
  }

  render () {
    return (
      <div>
        <Cover visible={this.vm.collectVisible}>
          <div onClick={this.vm.collect} className='collection'>{this.vm.collectType}</div>
          <div onClick={() => {
            this.vm.handleHideCover()
          }} className='cancel'>取 消</div>
        </Cover>
        <Content vm={this.vm} />
        <Reply vm={this.vm} />
        <Qrcode vm={this.vm} />
        <Footer vm={this.vm} />
      </div>
    )
  }
}
